<template>
    <van-sticky>
        <van-nav-bar
            title="商品评价"
            left-text="返回"
            left-arrow
            @click-left="OnBack"
        />
    </van-sticky>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="comment-list">
                <div class="item" v-for="item in CommentList" :key="item.id">
                    <div class="user">
                        <div class="avatar">
                            <img :src="item.business.avatar_text" alt="">
                        </div>
                        <div class="nickname">
                            {{ item.business.nickname }}
                        </div>
                        <div class="rate">
                            <van-rate
                                v-model="item.rate"
                                :size="14"
                                color="#ffd21e"
                                void-icon="star"
                                void-color="#eee"
                                readonly
                            />
                        </div>
                    </div>
                    <div class="content">
                        {{ item.comment }}
                    </div>
                    <div class="img-box" v-if="item.thumbs_text.length > 0">
                        <van-image
                            width="4rem"
                            height="4rem"
                            fit="cover"
                            v-for="(thumb,index) in item.thumbs_text"
                            :key="index"
                            :src="thumb"
                            @click="OnOpenThumb(thumb)"
                        />
                    </div>
                </div>
            </div>

            <!-- 返回顶部 -->
            <van-back-top />

        </van-list>
    </van-pull-refresh>

    <!-- 弹出层展示图片 -->
    <van-popup v-model:show="ThumbPopupShow" :style="{width:'90%',maxWidth:'90%'}">
        <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="thumb"
            :style="{display:'block'}"
        />
    </van-popup>
</template>

<script setup>

    const {proxy} = getCurrentInstance()

    const CommentList = ref([]);
    const proid = ref(proxy.$route.query.proid ?? 0);
    const page = ref(1);
    const refreshing = ref(false);
    const loading = ref(false);
    const finished = ref(false);

    // 弹出层
    const ThumbPopupShow = ref(false);
    const thumb = ref('');

    //刷新的方法
    const OnRefresh = () =>
    {
        // 清空查询参数
        page.value = 1;
        CommentList.value = [];
        finished.value = false;
        loading.value = true;
        refreshing.value = true;

        // 可以去掉定时器
        setTimeout(OnLoad,1500);
    }

    //上拉加载
    const OnLoad = async () =>
    {
        // 判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false;
        }

        //请求参数
        var params = {
            proid: proid.value,
            page: page.value
        }

        //发送请求
        var result = await proxy.$POST({url: '/product/comment', params})

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false;

        if(result.code == 0)
        {
            // 如果没有更多数据了 就说明已经加载到底了....
            finished.value = true;

            proxy.$fail(result.msg);

            return false
        }

        let count = result.data ? result.data.count : 0;
        CommentList.value = result.data ? CommentList.value.concat(result.data.list) : [];

        // 把评分转成整数，因为评分组件绑定值的数据类型是Number
        CommentList.value.map(item =>
        {
            item.rate = parseInt(item.rate);
        })

        if(CommentList.value.length >= count)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }

    const OnBack = () => proxy.$router.back()

    // 点击图片展示大图
    const OnOpenThumb = (value) => 
    {
        ThumbPopupShow.value = true

        thumb.value = value;
    }
</script>


<style scoped>
    .van-pull-refresh {
        min-height: 90vh;
        margin-top: 10px;
    }

    .comment-list .item {
        padding: 10px 15px;
    }

    .item .user {
        display: flex;
        align-items: center;
    }

    .item .user .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
    }

    .item .user .nickname {
        font-weight: bold;
        margin-right: 10px;
    }

    .item .content {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 14px;
        margin-left: 2.8em;
    }

    .item .img-box {
        margin-left: 2.5em;
        margin-top: 10px;
    }

    .item .van-image {
        margin-right: 12px;
    }

    .van-image:nth-child(4n) {
        margin-right: 0;
    }
</style>